<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>运费查询</title>


</head>
<body  th:fragment="citycopy">

<link rel="stylesheet" type="text/css" href="../wuliu/css/index.css">
<link rel="stylesheet" type="text/css" href="../wuliu/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="../wuliu/layui/css/layui.css" rel="stylesheet">
<style>
  input{
    /*border:1px solid #e5e5e5;*/
    border:1px solid #0a0a0a;
    border-radius:5px;
    padding:10px;
    margin: 5px 15px 5px -2px;
    text-align: center;
    font-family: serif;
  }
  .reshow {
    text-align: center;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    width: 1000px;
    height: 32px;
    outline: none;
    background: #6ab9d8;
    padding: 32px;
    margin: auto;
    margin-top: 20px;
    font-family: serif;
  }
  .reshow1 {
    display: none;
  }

  /*旋转进入代码*/
  .ff {
    width: 200px;
    height: 200px;
    margin: 200px auto;
    /* 给父级盒子加溢出隐藏，使得子盒子一开始不可见 */
    overflow: hidden;
    border: 2px solid purple;
  }

  .ff::before {
    content: "你好！";
    /* 伪类元素属于行内元素，没有宽高，故转换为块元素 */
    display: block;
    width: 200px;
    height: 200px;
    background-color: #f5f426;
    transition: all .4s;
    /* 先旋转180度 */
    transform: rotate(180deg);
    /* 旋转中心点为左下角 */
    transform-origin: left bottom;
  }

  .ff:hover::before {
    /* 一开始转了180度，鼠标放上去以后转0度就回到原来位置了 */
    transform: rotate(0deg);
  }

</style>

<div class="container" style="width: 100%;text-align: center" >

  <h3 style="font-family: serif;">--请选择原寄城市--</h3>
  <div class="dome-main" style="margin: auto;margin-top: 10px;margin-left: 10px;margin-right: 10px;text-align: center;padding: 10px;font-family: serif;">
    <div class="city-picker-selector" id="city-picker-search" style="text-align: center;margin: auto;width: fit-content;"></div>
  </div>


  <h3 style="font-family: serif;">--请选择目的城市--</h3>
  <div class="dome-main"  style="margin: auto;margin-top: 10px;margin-left: 10px;margin-right: 10px;text-align: center;padding: 10px;font-family: serif;">
    <div class="city-picker-selector" id="city-picker-search1" style="text-align: center;margin: auto;width: fit-content;"></div>
  </div>


</div>

<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<script type="text/javascript" src="../wuliu/jquery-1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../wuliu/js/streets-data.min.js"></script>
<script type="text/javascript" src="../wuliu/js/cityPicker-2.0.5.js"></script>
<script type="text/javascript">
  /*var t = document.getElementById("test1");
  function f(){
      var event = event || window.event;  //标准化事件对象
      t.value = (event.type);  //获取当前事件类型
      console.log(event)
  }
  t.onmouseover = f;*/
  function table(){
    alert("gggggggggg")
  }

  var fromcity;
  var fromprovince;
  var tocity;
  var toprovince;

  $('.btn-current2').on('click',function search(){
    var sdata = selector1.getCityVal();
    console.log(sdata[0].name);
    console.log(sdata[1].name);
    fromcity = sdata[1].name;
    fromprovince = sdata[0].name;

    var sdata2 = selector2.getCityVal();
    console.log(sdata2[0].name);
    console.log(sdata2[1].name);
    tocity = sdata2[1].name;
    toprovince = sdata2[0].name;


  });


  // 模拟城市-联动/搜索/键盘操作
  var selector1 = $('#city-picker-search').cityPicker({
    dataJson: cityData,
    renderMode: true,
    search: true,
    autoSelected: true,
    shorthand: true,
    keyboard: true,
    level: 2,
    onChoiceEnd: function() {
      console.log(this.values)
    }
  });

  // 设置城市
  selector1.setCityVal('福建省, 龙岩市');

  $('.btn-setcity').on('click', function (event) {
    selector1.setCityVal('福建省, 龙岩市');
  });

  // 获取城市值
  $('.btn-obtain').on('click', function (event) {
    alert(JSON.stringify(selector1.getCityVal()));
  });

  $('.btn-prohibit').on('click', function (event) {
    selector1.changeStatus('disabled');
  });

  $('.btn-current').on('click', function (event) {
    selector1.changeStatus('current');
  });

  // 模拟城市-联动/搜索/键盘操作
  var selector2 = $('#city-picker-search1').cityPicker({
    dataJson: cityData,
    renderMode: true,
    search: true,
    autoSelected: true,
    shorthand: true,
    keyboard: true,
    level: 2,
    onChoiceEnd: function() {
      console.log(this.values)
    }
  });

  // 设置城市
  selector2.setCityVal('福建省, 龙岩市');

  $('.btn-setcity1').on('click', function (event) {
    selector2.setCityVal('福建省, 龙岩市');
  });

  // 获取城市值
  $('.btn-obtain1').on('click', function (event) {
    alert(JSON.stringify(selector2.getCityVal()));
  });

  $('.btn-prohibit1').on('click', function (event) {
    selector2.changeStatus('disabled');
  });

  $('.btn-current1').on('click', function (event) {
    selector2.changeStatus('current');
  });





</script>

</body>
</html>